<template>
  <div class="app-container bg-white">
      <div class="page-body">
          <div>
              <h4>服务状态：{{afterStatus.name}}</h4>
              <el-steps :active="afterStatus.active" align-center finish-status="success" class="margin_top_20">
                <el-step :title="item.name" :description="item.time" v-for="(item, index) in afterStatus.list" :key="'status' + index"></el-step>
               </el-steps>
          </div>
          <el-collapse class="margin_top_20" v-model="activeNames">
            <el-collapse-item title="售后单信息" name="1">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>服务单号：</span>
                            <span>{{afterDetailData.returnNo || ''}}</span>
                        </div>
                        <div class="cell_item">
                            <span>申请时间：</span>
                            <span>{{afterDetailData.returnSubmitTime || ''}}</span>
                        </div>
                        <div class="cell_item">
                            <span>服务类型：</span>
                            <span>{{afterDetailData.type | typeFilter}}</span>
                        </div>
                        <div class="cell_item">
                            <span>申请原因：</span>
                            <span>{{afterDetailData.reason | reasonFilter}}</span>
                        </div>
                        <div class="cell_item">
                            <span>问题描述：</span>
                            <span>{{afterDetailData.remark || '暂无描述' }}</span>
                        </div>
                        <div class="cell_item">
                            <span>联系信息：</span>
                            <span>联系人：{{afterDetailData.consigneeName || ''}}  </span>
                            <span >手机：</span>
                            <span>{{afterDetailData.consigneePhone || ''}}</span>
                        </div>
                        <div class="cell_item">
                            <span>发货单信息：</span>
                            <span>快递公司：{{afterDetailData.expressCompany || '暂无快递信息'}} </span>
                            <span>单号：</span>
                            <span>{{afterDetailData.expressNo || '暂无单号'}}</span>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="退款明细" name="2">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <div class="cell_item">
                            <span>账户余额：</span>
                            <span>￥{{afterDetailData.deductionMoney | nomoney }}</span>
                        </div>
                        <div class="cell_item">
                            <span>实际支付：</span>
                            <span>￥{{afterDetailData.payMoney | nomoney }}</span>
                        </div>
                        <div class="cell_item">
                            <span>退款总额：</span>
                            <span>￥{{afterDetailData.totalMoney | nomoney }}</span>
                        </div>
                        <div class="cell_item">
                            <span>到账时间：</span>
                            <span>{{afterDetailData.completeTime || '--'}}</span>
                        </div>
                        <div class="cell_item">
                            <span>提示：请以银行实际到账时间为准</span>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="商品信息" name="6">
                <div class="collapse_content flex flex-start">
                    <div class="cell">
                        <el-table :data="tableData">
                            <el-table-column prop="goodsName" label="商品">
                                <template slot-scope="scope">
                                    <div class="flex align-center">
                                        <img :src="baseImgUrl + scope.row.surfaceImg" class="show_avator" v-if="scope.row.surfaceImg">
                                        <span class="show_avator" v-else>无封面</span>
                                        <div class="text-ellipsis margin_left_10" :title="scope.row.goodsName">{{scope.row.goodsName}}</div>
                                    </div>
                                </template>
                            </el-table-column>
                             <el-table-column prop="attributes" label="属性">
                                <template slot-scope="scope">
                                    <div v-for="(value, name, index) in scope.row.attributes" :key="'attr' + index">{{name}}：{{value}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="num" label="数量" width="180"></el-table-column>
                            <el-table-column prop="price" label="单价" width="180">
                                <template slot-scope="scope">
                                    <span>￥{{scope.row.price | nomoney}}</span>
                                </template>
                            </el-table-column>
                             <el-table-column label="物联码" width="180">
                                <template slot-scope="scope">
                                    <!-- v-if="roleBtns.includes('sys:user:remove') || $store.getters.isAdmin" -->
                                    <button class="my-btn my-btn--mini plain" @click="goDetail(scope.row)">查看</button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-collapse-item>
            <!-- <el-collapse-item title="操作日志" name="9" v-if="logList && logList.length">
                <div class="collapse_content flex flex-start">
                    <div class="cell" v-infinite-scroll="loadLogData" infinite-scroll-disabled="disabled" style="overflow:auto">
                        <div class="cell_item" v-for="(item, index) of logList" :key="'log' + index">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="cell_item" v-if="logLoading">加载中...</div>
                        <div class="cell_item" v-if="noMoreLogData">没有更多了</div>
                    </div>
                </div>
            </el-collapse-item> -->
          </el-collapse>
      </div>
      <el-dialog append-to-body title="查看物联码" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="isShowCode" :width="'640px'">
    <div v-loading="loading">
        <el-table :data="tableList">
            <el-table-column prop="goodsName" label="商品信息">
                <template slot-scope="scope">
                    <div class="flex align-center">
                        <img :src="baseImgUrl + scope.row.surfaceImg" class="show_avator" v-if="scope.row.surfaceImg">
                        <span class="show_avator" v-else>无封面</span>

                        <div class="text-ellipsis padding_left_10" :title="scope.row.goodsName">{{scope.row.goodsName}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="attributes" label="属性">
                <template slot-scope="scope">
                    <div v-for="(value, name, index) in scope.row.attributes" :key="'attr' + index">{{name}}：{{value}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" width="180"></el-table-column>
        </el-table>
        <div>
            <h4>详细信息</h4>
            <div>
                <p v-for="(item,index) in codeList" :key="index">{{item.id}}</p>
            </div>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button  @click="closeModal()">取消</el-button> -->
      <el-button type="primary" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import IotCode from '../components/iotCode'
import { getAftermarketDetail,getGoodsUniqueCode} from '@/views/order-management/services/index';
export default {
    components: {
        IotCode
    },
    filters: {
        nomoney(val) {
            if (!val) {
                return '0.00';
              }
            else {
                return Number(val).toFixed(2);
              }
        },
    typeFilter(val) {
      switch(val) {
          case 1:
            return  "换货"
            break;
          case 2:
            return  "退款退货"
            break;
          case 3:
            return  "仅退款"
            break;
          case 4:
            return  "补发"
            break;
          default:
            return  "换货"
        }
    },
    reasonFilter(val) {
        switch(val) {
          case 1:
            return  "商品与页面描述不符"
            break;
          case 2:
            return  "不合适"
            break;
          case 3:
            return  "质量问题"
            break;
          case 4:
            return  "少/错商品"
            break;
          case 5:
            return  "买错/买多"
            break;
          case 6:
            return  "不喜欢/无理由"
            break;
          case 7:
            return  "取消订单失败"
            break;
          case 8:
            return  "价格变化"
            break;
          case 9:
            return  "商品损坏/包装脏污"
            break;
          default:
            return  "换货"
        }
    }
  },
    data() {
      return {
        afterDetailData: [],
        activeNames: ['1'],
        expressCollapse: [],
        textarea1: '',
        expressActivities: [],
        logLoading: false,
        pageSize: 1,
        noMoreLogData: false,
        logList: [],
        tableData: [],
        baseImgUrl: process.env.VUE_APP_FILE_URL + '/',
        afterStatus: {
            name: '',
            active: 1,
            list: [
                { name: '申请', time: '' },
                { name: '审核', time: '' },
                { name: '处理', time: '' },
                { name: '完成', time: '' }
            ]
        },
        isShowCode: false,
        isGoodCode: '',
        childSkuId: '',
        goodsInfo: {},
        tableList: [],
        codeList: [],
        loading: false
      }
    },
    methods: {
        getPageData() {
            const loader = this.$loading({
                lock: true,
                fullscreen: true
            });
            getAftermarketDetail({ id: this.$route.query.id })
            .finally(() => loader.close())
            .then(data => {
                if (data.code == 200) {
                    this.afterDetailData = data.data.orderReturn;
                    switch (this.afterDetailData.status) {
                        case 1:
                            this.afterStatus.name = '申请';
                            this.afterStatus.active = 1;
                            break;
                        case 2:
                            this.afterStatus.name = '审核';
                            this.afterStatus.active = 2;
                            break;
                        case 3:
                            this.afterStatus.name = '审核驳回';
                            this.afterStatus.active = 2;
                            break;
                        case 4:
                            this.afterStatus.name = '处理';
                            this.afterStatus.active = 3;
                            break;
                        case 5:
                            this.afterStatus.name = '处理';
                            this.afterStatus.active = 3;
                            break;
                        case 6:
                            this.afterStatus.name = '处理';
                            this.afterStatus.active = 3;
                            break;
                        case 7:
                            this.afterStatus.name = '完成';
                            this.afterStatus.active = 4;
                            break;
                        case 8:
                            this.afterStatus.name = '已取消';
                            this.afterStatus.active = 3;
                            break;
                        default:
                            break;
                    }
                    this.afterStatus.list[0].time = this.afterDetailData.returnSubmitTime;
                    this.afterStatus.list[1].time = this.afterDetailData.auditTime;
                    this.afterStatus.list[2].time = this.afterDetailData.handleTime;
                    this.afterStatus.list[3].time = this.afterDetailData.completeTime;
                    data.data.orderReturn.attributes = JSON.parse(data.data.orderReturn.goodsParams).skuPropMap
                    this.tableData = this.tableData.concat(data.data.orderReturn)
                } else {
                    this.$message.error('订单详情获取失败!');
                }
            })
        },
        loadLogData() {
            if (this.logLoading || this.noMoreLogData) return;
            this.pageSize ++;
            this.logLoading = true;
            GetOrderLogList({ orderId: this.$route.query.id, pageSize: this.pageSize, pageNum: 10 })
            .finally(() => this.logLoading = false)
            .then(data => {
                if (data.data.list < 10) {
                    this.noMoreLogData = true;
                }
                if (data.data.list && data.data.list.length) {
                    this.logList.concat(data.data.map(item => {
                        return item;
                    }));
                }
            })
        },
        goDetail(data) {
            console.log(data)
            this.tableList.push(data)
            this.isGoodCode = data.suborderId;
            this.searchExpress()
            this.isShowCode = true;

        },
        searchExpress() {
        this.loading = true;
        getGoodsUniqueCode({ subOrderId: this.isGoodCode})
        .finally(() => this.loading = false)
        .then(data => {
            if (data.code == 200 && data.data) {
                this.codeList = data.data;
            } else {
            }
        })
        .catch(error => {
          console.log(error)
        })
    },
        closeModal() {
      this.isShowCode = false;
      this.tableList = [];
      this.codeList = []
    },
    },
    created() {
        this.getPageData();
        // this.loadLogData();
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
    padding: 0 15px;
    background-color: rgba(211, 211, 211, 0.35);
}

::v-deep .no_padding .el-collapse-item__header {
    padding: 0;
    background-color: transparent;
}

.collapse_content {
    padding: 15px 30px;
}

.cell {
    flex: 1;

    &.half {
        width: 50%;
    }

    .cell_item {
        padding: 7.5px 0;

        > span {
            &:last-child {
                color: gray;
            }
        }
    }
}

.price_content {

    > div {
        padding: 7.5px;

        > span {
            display: inline-block;

            &:first-child {
                width: 6em;
                text-align: right;
            }

            &:last-child {
                width: 8em;
                text-align: left;
                color: gray;
            }
        }
    }
}

.show_avator {
    width: 64px;
    height: 64px;
    vertical-align: middle;
}
</style>
